<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="a:">
          <el-input
            v-model="formData.anumber"
            clearable
            placeholder="请输入"
            @input="set_color_number_dict"
          ></el-input>
        </el-form-item>

        <el-form-item label="b:">
          <el-input
            v-model="formData.bnumber"
            clearable
            placeholder="请输入"
            @input="set_color_number_dict"
          ></el-input>
        </el-form-item>

        <el-form-item label="c:">
          <el-input
            v-model="formData.cnumber"
            clearable
            placeholder="请输入"
            @input="set_color_number_dict"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="suanfa" type="primary">算法1</el-button>
          <el-button @click="openTongjiDialog" type="primary"
            >查看统计</el-button
          >
        </el-form-item>

        <el-form-item label="起始期数:">
          <el-input
            v-model="formData.minqishu"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="结束期数:">
          <el-input
            v-model="formData.maxqishu"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="getqishu" type="primary">搜索期数</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
      ref="multipleTable"
      stripe
      tooltip-effect="dark"
      show-summary
      :height="600"
    >
      <el-table-column label="ID" prop="ID" align="center"></el-table-column>
      <el-table-column
        label="time"
        prop="time"
        align="center"
      ></el-table-column>
      <el-table-column label="number1字段" width="120" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              fudongMessage.hasOwnProperty(
                scope.row.ID + '-' + scope.row.number1
              )
            "
          >
            <el-popover trigger="hover" placement="top">
              <p>期数: {{ scope.row.ID }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :type="scope.row.number1 | tagTypeFiletr(that)"
                  >{{ scope.row.number1 }}</el-tag
                >
              </div>
            </el-popover>
          </div>
          <div v-else>{{ scope.row.number1 }}</div>
        </template>
      </el-table-column>

      <el-table-column label="number2字段" width="120" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              fudongMessage.hasOwnProperty(
                scope.row.ID + '-' + scope.row.number2
              )
            "
          >
            <el-popover trigger="hover" placement="top">
              <p>期数: {{ scope.row.ID }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :type="scope.row.number2 | tagTypeFiletr(that)"
                  >{{ scope.row.number2 }}</el-tag
                >
              </div>
            </el-popover>
          </div>
          <div v-else>{{ scope.row.number2 }}</div>
        </template>
      </el-table-column>

      <el-table-column label="number3字段" width="120" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              fudongMessage.hasOwnProperty(
                scope.row.ID + '-' + scope.row.number3
              )
            "
          >
            <el-popover trigger="hover" placement="top">
              <p>期数: {{ scope.row.ID }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :type="scope.row.number3 | tagTypeFiletr(that)"
                  >{{ scope.row.number3 }}</el-tag
                >
              </div>
            </el-popover>
          </div>
          <div v-else>{{ scope.row.number3 }}</div>
        </template>
      </el-table-column>

      <el-table-column label="number4字段" width="120" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              fudongMessage.hasOwnProperty(
                scope.row.ID + '-' + scope.row.number4
              )
            "
          >
            <el-popover trigger="hover" placement="top">
              <p>期数: {{ scope.row.ID }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :type="scope.row.number4 | tagTypeFiletr(that)"
                  >{{ scope.row.number4 }}</el-tag
                >
              </div>
            </el-popover>
          </div>
          <div v-else>{{ scope.row.number4 }}</div>
        </template>
      </el-table-column>

      <el-table-column label="number5字段" width="120" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              fudongMessage.hasOwnProperty(
                scope.row.ID + '-' + scope.row.number5
              )
            "
          >
            <el-popover trigger="hover" placement="top">
              <p>期数: {{ scope.row.ID }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :type="scope.row.number5 | tagTypeFiletr(that)"
                  >{{ scope.row.number5 }}</el-tag
                >
              </div>
            </el-popover>
          </div>
          <div v-else>{{ scope.row.number5 }}</div>
        </template>
      </el-table-column>

      <el-table-column label="所属项目" prop="projectId" align="center">
        <template slot-scope="scope">
          {{ filterDict(scope.row.projectId, "sys_project_id") }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="统计信息"
      :visible.sync="dialogTongjiFormVisible"
      :before-close="closeTongjiDialog"
    >
      <span>统计信息</span>

      <el-table
        :data="tongjiTabledata"
        style="width: 100%"
        :default-sort="{ prop: 'value', order: 'descending' }"
      >
        <el-table-column prop="key1" label="a-b相差期数" width="180">
        </el-table-column>
        <el-table-column prop="key2" label="b-c相差期数" width="180">
        </el-table-column>
        <el-table-column prop="value" label="次数" width="180%" sortable>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTongjiDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSysCaipiaoNumbersList,
  getLengSysCaipiaoNumbers,
} from "@/api/sysCaipiaoNumbers"; //  此处请自行替换地址
import { formatTimeToStr } from "@/utils/date";
import infoList from "@/mixins/infoList";
export default {
  name: "SysCaipiaoNumbers",
  mixins: [infoList],
  data() {
    return {
      that: this,
      listApi: getSysCaipiaoNumbersList,
      dialogFormVisible: false,

      dialogTongjiFormVisible: false,
      type: "",
      multipleSelection: [],
      sys_project_idOptions: [],
      formData: {
        time: new Date(),
        number1: "",
        number2: "",
        number3: "",
        number4: "",
        number5: "",
        projectId: 0,
        project_id: 539,
        qishu: 3000,
        anumber: "11",
        bnumber: "16",
        cnumber: "27",
        minqishu: "103/11/01",
        maxqishu: "103/11/12",
      },

      formlenreData: [],
      anumberArray: [], //方便标上不同颜色
      bnumberArray: [], //方便标上不同颜色
      cnumberArray: [], //方便标上不同颜色
      countChazhi: {}, //统计每个出现的次数
      fudongMessage: {}, //方便具体期数与数字的高亮
      tongjiTabledata: [], //
      color_number_dict: {
        11: "success",
        16: "warning",
        27: "danger",
      },
      //   page: 1,
      //   pageSize: 100000,
    };
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    },
    formatBoolean: function (bool) {
      if (bool != null) {
        return bool ? "是" : "否";
      } else {
        return "";
      }
    },
    tagTypeFiletr(value, that) {
      //const target = methodOptions.filter((item) => item.value === value)[0];
      //return target && `${target.type}`;
      let state = that.color_number_dict[parseInt(value)];
      window.console.log(state);
      return state;
    },
  },
  methods: {
    getqishu() {
      //截取尾部数组
      //转化未数组
      let startindex = "not";
      let endindex = "not";
      for (let obj in this.tableData) {
        let dataArrays = this.tableData[obj];
        if (dataArrays["time"] == this.formData.minqishu) {
          startindex = obj;
        }
        if (dataArrays["time"] == this.formData.maxqishu) {
          endindex = obj;
          break;
        }
        window.console.log(
          dataArrays["time"],
          this.formData.minqishu,
          this.formData.maxqishu
        );
      }
      if (startindex == "not" || endindex == "not") {
        alert("找不到对应的期数！请仔细检查期数输出是否正常！");
        return false;
      }
      this.tableData = this.tableData.slice(startindex, parseInt(endindex) + 1);
    },
    set_color_number_dict() {
      //配置颜色对应的数字
      this.color_number_dict = {};
      this.color_number_dict[parseInt(this.formData.anumber)] = "success";
      this.color_number_dict[parseInt(this.formData.bnumber)] = "warning";
      this.color_number_dict[parseInt(this.formData.cnumber)] = "danger";
      window.console.log(this.color_number_dict);
    },
    //条件搜索前端看此方法
    onSubmit() {
      this.page = 1;
      this.pageSize = 10;
      this.getTableData();
      this.tableData = this.getObjsToArray(this.tableData);
      window.console.log(1, this.tableData);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    tableRowClassName({ row, rowIndex }) {
      console.log(row, rowIndex);
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    closeDialog() {
      this.dialogFormVisible = false;
      this.formData = {
        time: new Date(),
        number1: "",
        number2: "",
        number3: "",
        number4: "",
        number5: "",
        projectId: 0,
      };
    },

    closeTongjiDialog() {
      //关闭统计的弹窗
      this.dialogTongjiFormVisible = false;
    },
    openDialog() {
      this.type = "create";
      this.dialogFormVisible = true;
    },

    openTongjiDialog() {
      window.console.log(this.countChazhi);
      let data = [];
      for (let obj in this.countChazhi) {
        window.console.log(obj);
        let keys = obj.split(":");
        let o = {
          key1: keys[0],
          key2: keys[1],
          value: this.countChazhi[obj],
        };
        data.push(o);
      }
      this.tongjiTabledata = data;

      this.dialogTongjiFormVisible = true;
    },
    getObjValue(obj) {
      //把对象属性的值转换为array
      var arr = [];
      for (let i in obj) {
        arr.push(obj[i]); //属性
      }
      return arr;
    },
    getObjsToArray(objs) {
      //把大量对象的属性转化为列表。
      for (let obj in objs) {
        objs[obj]["dataArrays"] = this.getObjValue(objs[obj]);
      }
      window.console.log(objs);
      return objs;
    },
    suanfa() {
      this.countChazhi = {};
      this.fudongMessage = {};
      this.tongjiTabledata = [];
      //开始按照规律1统计算法。
      this.tableData = this.getObjsToArray(this.tableData);
      //比较值初始比较应该从a开始比较，然后为b，然后为c
      let bijiaozhi = this.formData.anumber;
      let aindex = "not";
      let bindex = "not";
      let cindex = "not";
      for (let obj in this.tableData) {
        const arr = this.tableData[obj]["dataArrays"];
        //查找当前比较值是否存在在列表中。

        if (
          arr.indexOf(this.formData.anumber) > -1 &&
          aindex == "not" &&
          bindex == "not" &&
          cindex == "not"
        ) {
          bijiaozhi = this.formData.bnumber;
          aindex = obj;
          this.anumberArray.push(arr[0]);
          //推送一个id+该符号到对象中，在页面table高亮
          this.fudongMessage[
            arr[0].toString() + "-" + this.formData.anumber.toString()
          ] = arr[0];
        } else if (
          arr.indexOf(this.formData.bnumber) > -1 &&
          bindex == "not" &&
          aindex != "not"
        ) {
          bijiaozhi = this.formData.cnumber;
          bindex = obj;
          this.bnumberArray.push(arr[0]);
          this.fudongMessage[
            arr[0].toString() + "-" + this.formData.bnumber.toString()
          ] = arr[0];
        } else if (
          arr.indexOf(this.formData.cnumber) > -1 &&
          bindex != "not" &&
          aindex != "not"
        ) {
          bijiaozhi = this.formData.anumber;
          cindex = obj;
          this.cnumberArray.push(arr[0]);
          window.console.log(arr);
          window.console.log(aindex, bindex, cindex);

          let key =
            (bindex - aindex).toString() + ":" + (cindex - bindex).toString();

          //设计key值为2:4
          if (this.countChazhi.hasOwnProperty(key)) {
            this.countChazhi[key] = this.countChazhi[key] + 1;
          } else {
            this.countChazhi[key] = 1;
          }
          this.fudongMessage[
            arr[0].toString() + "-" + this.formData.cnumber.toString()
          ] = arr[0];
          //还原下次统计
          aindex = "not";
          bindex = "not";
          cindex = "not";
        }
      }
      window.console.log(this.countChazhi);
      window.console.log(this.fudongMessage);
    },
  },
  async created() {
    this.page = 1;
    this.pageSize = 10000;
    await this.getTableData();
    await this.getDict("sys_project_id");
  },
};
</script>

<style>
</style>
